import React from 'react';
import styles from './typography.module.less';

interface TitleProps {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  children: React.ReactNode;
}

const Title: React.FC<TitleProps> = (props) => {
  const { level = 1, children } = props;
  const TagName = `h${level}` as keyof JSX.IntrinsicElements;
  return (
    <TagName className={`${styles.text} ${styles[`text-title-${level}`]}`}>
      {children}
    </TagName>
  );
};

export default Title;
